<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox" class="container">
    <h1>企业工单管理系统</h1>
    <div class="row">
      <div class="col-md-6">
        <form class="form-inline" role="form" style="padding-left: 250px;">
          <div class="form-group" style="padding-left: 20px;">
            <label>选择项目:</label>
            <select class="form-control" v-model="neworder.projectid">
              <option v-for="item in proList" :value="item.id">{{item.projectname}}</option>
            </select>
          </div>
          <div class="form-group"  style="padding-left: 20px;">
            <button type="button" class="btn btn-primary" @click="confirm">确定</button>
          </div>
        </form>
      </div>
    </div>

    <!--模态框-->
    <div class="modal" id="mymodal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button @click="hideModal" class="close" type="button">&times;</button>
            <div class="modal-title">添加工单</div>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="executor" class="col-sm-2 control-label">执行人</label>
                <div class="col-sm-10">
                  <input v-model="neworder.executor" id="executor" type="text" class="form-control" placeholder="请输入图书名称">
                </div>
              </div>
              <div class="form-group">
                <label for="summary" class="col-sm-2 control-label">任务描述</label>
                <div class="col-sm-10">
                  <input v-model="neworder.description" id="summary" type="text" class="form-control" placeholder="请输入图书摘要"/>
                </div>
              </div>

              <div class="form-group">
                <label for="categoryId" class="col-sm-2 control-label">级别</label>
                <div class="col-sm-10">
                  <select id="categoryId" class="form-control" v-model="neworder.orderlevel">
                    <option value="1">一级</option>
                    <option value="2">2级</option>
                    <option value="3">3级</option>
                  </select>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" @click="hideModal()">关闭</button>
            <button class="btn btn-primary" @click="saveBook">保存</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
               proList:{},
                neworder:{
                    projectid:"1",executor:"",description:"",orderlevel:""
                },
                retsult:""
            },
            methods:{
                hideModal:function () {
                    $("#mymodal").modal('hide');
                },
                confirm:function () {
                    $("#mymodal").modal('show');
                },
                saveBook:function () {
                    var executor=$("#executor").val();
                    if(executor.length==0){
                        alert("执行人不能为空!")
                        return;
                    }
                axios.post("/addWork",this.neworder).then(res=>{
                    this.result=res.data;
                    if(this.result=="success"){
                        alert("添加成功!")
                        this.hideModal();
                    window.location.href="main.html";
                    }else{
                        alert("添加失败!")
                    }
                })
                 }
            },
            mounted(){
                axios.get("/selePro").then(res=>{
                    this.proList=res.data;
                })
            }
    })
</script>